<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">

</head>
<body>
	<div style="width: 70%; margin: 20px auto; text-align: right;">
		<button class="btn btn-info" data-toggle="modal"
			data-target="#addModal">增加</button>
		<button class="btn btn-info" id="del_depts_btn" >删除</button>
	</div>
	<table class=".table table-striped table-bordered table-hover"
		style="margin: 20px auto; width: 70%" id="deptTable">
		<thead>
			<tr>

				<th>操作</th>
				<th>部门id</th>
				<th>部门编号</th>
				<th>部门名称</th>


				<th width="120px">操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>

	</table>

	<!-- 增加开始 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">部门增加</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="add_dept_form">
						<div class="form-group">
							<label for="dcode" class="col-sm-2 control-label">部门编号</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="dcode"
									placeholder="请输入部门编号" name="dcode">
							</div>
						</div>
						<div class="form-group">
							<label for="dname" class="col-sm-2 control-label">部门名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="dname"
									placeholder="请输入部门名称" name="dname">
							</div>
						</div>
						<div class="form-group">
							<label for="test" class="col-sm-2 control-label">部门图片</label>
							<div class="col-sm-10">
								<input type="file"  name="test" />
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="add_dept_btn">保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
	<!-- 增加结束 -->	    			

<script type="text/javascript"  src="${pageContext.request.contextPath}/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"  src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
  function loadDeptData(){
	  
	  $.ajax({
		   url:"list",
		   type:"post",
		   dataType:"json",
		   async:true,
		   error:function(){
			   
			   
		   },
		   success:function(data){
			  var trStr="" ;
			  for(var i=0;i<data.length;i++){
				  trStr=trStr+"<tr>";
				  trStr=trStr+"<td><input type='checkbox' name='did' value='"+data[i].id+"'/></td>";
				  trStr=trStr+"<td>"+data[i].id+"</td>";
				  trStr=trStr+"<td>"+data[i].dcode+"</td>";
				  trStr=trStr+"<td>"+data[i].dname+"</td>";
				  trStr=trStr+"<td>";
				  trStr=trStr+"<button class='btn btn-danger btn-xs' name='del_dept_btn'>删除</button>";
				  trStr=trStr+"</td>";
				  trStr=trStr+"</tr>";
			  }
			  
			  $("#deptTable tbody").html(trStr);
			  delDept();
			    
			    
		   }
		  
		  
	  });
	  
  }
  //增加部门函数定义
  function  addDept(){
	  
	  $("#add_dept_btn").click(function(){
		  var formData = new FormData();
		  formData.append('test', $(':input[name=test]')[0].files[0]);
		  formData.append('dname',"lala");
		  formData.append('dcode','1212');
		  $.ajax({
			   url:"addDept",
			   type:"post",
			   async:true,
			   data: new FormData($('#add_dept_form')[0]),
			   processData: false,
			   contentType: false,
			   error:function(){
				   
				   
			   },
			   success:function(data){
				    alert(data);
				    //隐藏模态框
				    $('#addModal').modal('hide');
				  
				    //重新加载数据
				    loadDeptData();
				    
				    
			   }
			    
			  
		  });
		  
	  });
	  
	  $('#addModal').on('hidden.bs.modal', function (e) {
		  $('#add_dept_form [name=dcode]').val("");
	  })
	  
  }
  
  
  function delDept(){
	  $("[name=del_dept_btn]").click(function(){
		    
		    var deptId=$(this).parents("tr").children("td").first().next().text();
		  
		   $.ajax({
			   url:"delDept",
			   type:"post",
			   async:true,
			   data:{"id":deptId},//删除的记录的id
			   error:function(){
				   
				   
			   },
			   success:function(data){
				    alert(data);
				  
				  
				    //重新加载数据
				    loadDeptData();
				    
				    
			   }
			   
			   
		   });
		  
	  });
	  
	  
	  
  }
  
  //批量删除函数定义
  function delDepts(){
	  
	  $("#del_depts_btn").click(function(){
		  
		  var ids=[];
		  $(":checkbox[name=did]:checked").each(function(){
			  ids.push($(this).val());
			  
			  
		  });
		  
		  $.ajax({
			    
			   url:"delDepts",
			   type:"post",
			   async:true,
			   data:{"ids":ids.join(",")},//删除的记录的id
			   error:function(){
				   
				   
			   },
			   success:function(data){
				    alert(data);
				  
				  
				    //重新加载数据
				    loadDeptData();
				    
				    
			   }
			  
			  
		  });
	  });
	  
  }

  $(function(){
	   //获得所有的部门信息
	  loadDeptData();
	   
	   //部门增加
	  addDept();
	   
	  
	  delDepts();
  })

</script>
</body>
</html>